.v-visualizing {
	color: #d3d6dd;
	width: 1920px;
	height: 1080px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transform-origin: left top;
	overflow: hidden;

	.bg {
		width: 100%;
		height: 100%;
		padding: 16px 16px 0 16px;
		background-image: url('@/assets/images/v_bg.png');
		background-size: cover;
		background-position: center center;
	}

	.host-body {
		.dv-dec-10,
		.dv-dec-10-s {
			width: 33.3%;
			height: 5px;
		}

		.dv-dec-10-s {
			transform: rotateY(180deg);
		}

		.dv-dec-8 {
			width: 200px;
			height: 50px;
		}

		.title {
			position: relative;
			width: 680px;
			text-align: center;
			background-size: cover;
			background-repeat: no-repeat;

			.title-text {
				font-size: 42px;
				font-weight: 900;
				width: 580px;
				position: absolute;
				letter-spacing: 6px;
				bottom: 0;
				left: 50%;
				transform: translate(-50%);
				background: linear-gradient(92deg, #0072ff 0%, #00eaff 48.8525390625%, #01aaff 100%);
				background-clip: text;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}

			.dv-dec-6 {
				position: absolute;
				bottom: -12px;
				left: 50%;
				width: 250px;
				height: 10px;
				transform: translate(-50%);
			}
		}

		.timers {
			position: absolute;
			right: 0;
			padding-right: 30px;
			top: 30px;
			font-size: 24px;
			display: flex;
			align-items: center;
		}

		// 第二行
		.aside-width {
			width: 40%;
		}

		.react-r-s,
		.react-l-s {
			background-color: #0f1325;
		}

		// 平行四边形
		.react-right {
			&.react-l-s {
				text-align: right;
				width: 500px;
			}

			font-size: 18px;
			width: 300px;
			line-height: 50px;
			text-align: center;
			transform: skewX(-45deg);

			.react-after {
				position: absolute;
				right: -25px;
				top: 0;
				height: 50px;
				width: 50px;
				background-color: #0f1325;
				transform: skewX(45deg);
			}

			.text {
				display: inline-block;
				transform: skewX(45deg);
			}
		}

		.react-left {
			&.react-l-s {
				width: 500px;
				text-align: left;
			}

			font-size: 18px;
			width: 300px;
			height: 50px;
			line-height: 50px;
			text-align: center;
			transform: skewX(45deg);
			background-color: #0f1325;

			.react-left {
				position: absolute;
				left: -25px;
				top: 0;
				height: 50px;
				width: 50px;
				background-color: #0f1325;
				transform: skewX(-45deg);
			}

			.text {
				display: inline-block;
				transform: skewX(-45deg);
			}
		}

		// 图表区布局样式，区域内也可以采用 Element-Plus 组件 <el-row><el-col> 布局
		.body-box {
			margin-top: 18px;
			display: flex;
			flex-direction: column;

			.content-box {
				display: grid;
				grid-template-columns: 2fr 3fr 5fr 3fr 2fr;
			}

			.content-box-col232 {
				display: grid;
				grid-template-columns: 2fr 3fr 2fr;
			}

			.content-box-col1 {
				display: grid;
				grid-template-columns: 1fr;
			}

			.content-box-col2 {
				display: grid;
				grid-template-columns: 1fr 1fr;
			}

			.content-box-col3 {
				display: grid;
				grid-template-columns: 1fr 1fr 1fr;
			}
		}
	}
}
